
import { App } from "../../application";
import Events from "../../application/constants/Events";
import { Widget } from "./Widget";

/**比例尺
 * @param name 比例尺值
 * @param click 指北针事件
 * @param dblclick 指北针事件
 */
class Compass extends Widget{
    private dom;
    // private imagePath: string;

	constructor(imagePath: string) {
        super();
		let ui = App.getInstance().ui;
		let rotate = App.getInstance().map.getHeadAngle(); //地图的方向角

		ui.setCustomCSS({
            className: 'compass',
            callBack: () => {
                return `
                    width:54px;
                    height:54px;
                    border:1px solid rgba(0,0,0,.85);
                    border-radius: 50px;
                    position: fixed;
                    bottom:80px;
                    right:8px;
                    z-index:10;
                    background: url(${imagePath}) 0% 0% / 266px no-repeat;
                    cursor:pointer;
                `;
            },
        });

        ui.setCustomCSS({
            className: 'pointer',
            callBack: () => {
                return `
            width: 14px;
            height: 44px;
            background: url(${imagePath}) -56px -4px / 266px no-repeat;
            transform: rotate(${rotate}deg);
            position: absolute;
            left: 19px;
            top: 4px;
            transition: transform 0.3s ease-in-out;
    
          `;
            },
        });

		App.getInstance().on(Events.AngleChange, (event) => {
            let curAngle = App.getInstance().map.getHeadAngle(); //地图的方向角
            ui.setCustomCSS({
                className: 'pointer',
                callBack: () => {
                    return `transform: rotate(${curAngle}deg);`;
                },
            });
        })
	}

	/**
	 * 加载元素
	 * @param className 按钮类名 默认值：'Compass'
	 * @param parentClassName 容器类名 默认值：document.body
	 */
	public loadToDom(className = 'compass', parentClassName?: string) {
		const app = parentClassName ? document.getElementsByClassName(parentClassName)[0] : document.body;
		this.dom = document.createElement('div');
        this.dom.style.userSelect = 'none'; //解决鼠标粘连的问题
		const pointer = document.createElement('div');
		this.dom.setAttribute('class', className);
		pointer.setAttribute('class', 'pointer');
		this.dom.appendChild(pointer);
		app.appendChild(this.dom);
		// dom.addEventListener('click', this.click, false);
		// dom.addEventListener('dblclick', this.dblclick, false);
	}

    public dispose(){
        if(!this.dom || !this.dom.parentNode){
            return;
        }
        this.dom.parentNode.removeChild(this.dom)
    }
}

export { Compass };
